<template>
	<gui-page>
		<!-- 页面主体 -->
		<template v-slot:gBody>
			<view class="gui-padding">
				<text class="gui-text gui-color-gray">表单验证演示</text>
			</view>
			<view>
				<form @submit="submit">
					<view 
					class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
						<view 
						class="gui-form-item gui-border-b">
							<text class="gui-form-label">字符验证</text>
							<view class="gui-form-body">
								<input type="text" 
								class="gui-form-input" 
								v-model="formData.name1" 
								name="name1" 
								placeholder="请输入内容" />
							</view>
						</view>
						<view 
						class="gui-form-item gui-border-b">
							<text class="gui-form-label">密码验证</text>
							<view class="gui-form-body">
								<input type="password" 
								class="gui-form-input" 
								v-model="formData.name2" 
								name="name2" 
								placeholder="请输入内容" />
							</view>
						</view>
						<view 
						class="gui-form-item gui-border-b">
							<text class="gui-form-label">密码验证</text>
							<view class="gui-form-body">
								<input type="password" 
								class="gui-form-input" 
								v-model="formData.name3" 
								name="name3" 
								placeholder="请输入内容" />
							</view>
						</view>
						<view 
						class="gui-form-item gui-border-b">
							<text class="gui-form-label">邮箱验证</text>
							<view class="gui-form-body">
								<input type="text" 
								class="gui-form-input" 
								v-model="formData.name4" 
								name="name4" 
								placeholder="请输入内容" />
							</view>
						</view>
						<view 
						class="gui-form-item gui-border-b">
							<text class="gui-form-label">选择验证</text>
							<view class="gui-form-body">
								<picker 
								mode="selector" 
								:range="gender" 
								@change="pickerChange">
									<view 
									class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
										<text 
										class="gui-text">{{gender[genderIndex]}}</text>
										<text 
										class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
									</view>
								</picker>
							</view>
						</view>
						<view 
						class="gui-form-item gui-border-b">
							<text class="gui-form-label">多选验证</text>
							<view class="gui-form-body" 
							style="padding:20rpx 0;">
								<checkbox-group 
								name="name6" 
								class="gui-flex gui-rows gui-wrap">
									<label class="gui-check-item">
										<checkbox value="1"></checkbox>
										<text class="gui-text gui-primary-color">读书</text>
									</label>
									<label class="gui-check-item">
										<checkbox value="2"></checkbox>
										<text class="gui-text gui-primary-color">运动</text>
									</label>
									<label class="gui-check-item">
										<checkbox value="3"></checkbox>
										<text class="gui-text gui-primary-color">音乐</text>
									</label>
									<label class="gui-check-item">
										<checkbox value="4"></checkbox>
										<text class="gui-text gui-primary-color">书法</text>
									</label>
									<label class="gui-check-item">
										<checkbox value="5"></checkbox>
										<text class="gui-text gui-primary-color">旅行</text>
									</label>
									<label class="gui-check-item">
										<checkbox value="6"></checkbox>
										<text class="gui-text gui-primary-color">其他</text>
									</label>
								</checkbox-group>
							</view>
						</view>
						<view 
						class="gui-form-item">
							<text class="gui-form-label">正则验证</text>
							<view class="gui-form-body">
								<input 
								type="text" 
								class="gui-form-input" 
								v-model="formData.name7" 
								name="name7" 
								placeholder="请输入内容" />
							</view>
						</view>
						<view 
						class="gui-form-item gui-border-b">
							<text class="gui-form-label">身份证号</text>
							<view class="gui-form-body">
								<input 
								type="text" 
								class="gui-form-input" 
								v-model="formData.name8" 
								name="name8" 
								placeholder="请输入身份证号码" />
							</view>
						</view>
					</view>
					<view 
					class="gui-margin-top gui-flex gui-row gui-nowrap gui-justify-content-end gui-padding-x">
						<button 
						type="default" 
						class="gui-button gui-bg-primary gui-noborder" 
						style="width:168rpx;" 
						formType="submit">
							<text class="gui-color-white gui-button-text">提交</text>
						</button>
					</view>
					<view style="height:60rpx;"></view>
				</form>
			</view>
		</template>
	</gui-page>
</template>
<script>
import graceChecker from "@/Grace6/js/checker.js";
export default {
	data() {
		return {
			formData : {
				name1 : "GraceUI",
				name2 : "888888",
				name3 : "888888",
				name4 : "888888@qq.com",
				name5 : '请选择性别',
				name7 : '123456',
				name8 : ''
			},
			gender : ['请选择性别', '男', '女'],
			genderIndex : 0
		}
	},
	methods: {
		submit : function(e){
			//定义表单规则
			var rule = [
				{name:"name1", checkType : "string", checkRule:"1,10", errorMsg:"**应为1-10个字符"},
				{name:"name2", checkType : "string", checkRule:"6,", errorMsg:"密码至少6个字符"},
				{name:"name3", checkType : "samewith", checkRule:"name2", errorMsg:"两次密码输入不一致"},
				{name:"name4", checkType : "email", checkRule:"", errorMsg:"邮箱格式错误"},
				{name:"name5", checkType : "notsame", checkRule:"请选择性别", errorMsg:"请选择性别"},
				// 正则表达式验证演示 : 例如检查必须是有效数字
				{name:"name7", checkType : "reg", checkRule:"^(-?\\d+)$", errorMsg:"必须是有效数字"},
				{name:"name8", checkType : "idCard", checkRule:"", errorMsg:"身份证号码错误"}
			];
			//进行表单验证 e.detail.value 内存放着表单数据
			var formData   = e.detail.value;
			formData.name5 = this.formData.name5;
			console.log(formData);
			var checkRes = graceChecker.check(formData, rule);
			if(checkRes){
				// 当验证 js 不适用某个检查时，使用自定义函数进行检查
				if(formData.name6.length < 1){
					uni.showToast({title:"请选择爱好!", icon:"none"});
					// return 会终止函数继续运行哦
					return false;
				}
				uni.showToast({title:"验证通过!", icon:"none"});
			}else{
				uni.showToast({ title: graceChecker.error, icon: "none" });
			}
			
		},
		pickerChange : function (e) {
			this.genderIndex    = e.detail.value;
			this.formData.name5 = this.gender[this.genderIndex];
		}
	}
}
</script>
<style scoped lang="scss">
</style>